<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>

import Map from 'ol/Map';
import View from 'ol/View';
import geojsonvt from 'geojson-vt';
import { Tile as TileLayer, VectorTile as VectorTileLayer } from 'ol/layer'
import { OSM, VectorTile } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';
import Projection from 'ol/proj/Projection';
export default {
  data () {
    return {

    };
  },
  methods: {
    getGeoJSON () {

      /* return .then(response => {
        console.log(response.body);
        return response.body;
      }); */

    }
  },
  mounted () {

    var map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
    var url = 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson';
    var tilePixels = new Projection({
      code: 'TILE_PIXELS',
      units: 'tile-pixels'
    });
    this.$http.get(url).then(response => response.json()).then((jsonData) => {
      //var jsonData = response.body;
      //调用矢量瓦片模块
      var tileIndex = geojsonvt(jsonData, {
        extent: 4096,
        debug: 1
      });

      var vectorSource = new VectorTile({
        format: new GeoJSON(),
        tileLoadFunction: function (tile) {
          var format = tile.getFormat();
          var tileCoord = tile.getTileCoord();
          var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
          var features = format.readFeatures(
            JSON.stringify({
              type: 'FeatureCollection',
              features: data ? data.features : []
            }, replacer));
          tile.setLoader(function () {
            tile.setFeatures(features);
            tile.setProjection(tilePixels);
          });
        },
        url: 'data'
      });
      var vectorLayer = new VectorTileLayer({
        source: vectorSource
      });
      map.addLayer(vectorLayer);
    });
    var replacer = function (key, value) {
      if (value.geometry) {
        var type;
        var rawType = value.type;
        var geometry = value.geometry;

        if (rawType === 1) {
          type = 'MultiPoint';
          if (geometry.length == 1) {
            type = 'Point';
            geometry = geometry[0];
          }
        } else if (rawType === 2) {
          type = 'MultiLineString';
          if (geometry.length == 1) {
            type = 'LineString';
            geometry = geometry[0];
          }
        } else if (rawType === 3) {
          type = 'Polygon';
          if (geometry.length > 1) {
            type = 'MultiPolygon';
            geometry = [geometry];
          }
        }

        return {
          'type': 'Feature',
          'geometry': {
            'type': type,
            'coordinates': geometry
          },
          'properties': value.tags
        };
      } else {
        return value;
      }
    };
  }
}
</script>
<style lang="sass" scoped>
#map {height: 800px;}
</style>

